<template>
  <div>
    <router-link :to="{path: '/detailPage'}">
      <div
        class="entry"
        style="margin-bottom: 0px;"
        @mouseover="cursorInBlog=true"
        @mouseleave="cursorInBlog=false"
      >
        <MetaContainer
          :author="blogInfo.author"
          :publishTime="blogInfo.publishTime"
          :tagList="blogInfo.tagList"
        />
        <ContentWrapper
          :title="blogInfo.title"
          :abstract="blogInfo.content"
          :imgSrc="blogInfo.imgSrc"
          :views="blogInfo.views"
          :likes="blogInfo.likes"
          :comments="blogInfo.comments"
        />
        <!-- <DislikeButton /> -->
        <!-- <DislikeButton :tagList="blogInfo.tagList" v-show="cursorInBlog"/> -->
        <DislikeButton
          :tagList="blogInfo.tagList"
          :author="blogInfo.author"
        />
      </div>
    </router-link>

  </div>
</template>

<script>
import DislikeButton from "./DislikeButton.vue";
import MetaContainer from "./MetaContainer.vue";
import ContentWrapper from "./ContentWrapper.vue";

export default {
  data() {
    return {
      cursorInBlog: false,
    };
  },
  props: ["blogInfo"],
  components: { DislikeButton, MetaContainer, ContentWrapper },
};
</script>

<style>
.entry {
  cursor: pointer;
  position: relative;
  background: #fff;
  padding: 12px 20px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.entry:hover {
  background-color: #f2f3f5;
}
</style>